<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="base/head::head"/>
<!--业务表单按钮信息-->
<body class="easyui-layout">
<div th:replace="base/load::load"/>
<div id="west-tool">
    <a href="#" class="icon-refresh" onclick="onRefreshDataList()"></a>
</div>
<div id="table-tool">
    <a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="onAdd()">新增</a>
    <a id="btn-edit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="onEdit()">修改</a>
    <a id="btn-remove" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="onRemove()">删除</a>
    <a id="btn-default" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-create',plain:true" onclick="onDefault()">生成默认</a>
    <a id="btn-refresh" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-refresh',plain:true" onclick="onRefresh()">刷新</a>
</div>
<div data-options="region:'west',split:true,title:'业务表单',tools:'#west-tool'" style="width:200px;">
    <div id="list" class="easyui-datalist" data-options="url:'../form/list?formStatus=1',valueField:'formName',textField:'formDisplay',method:'get',fit:true,border:false,animate:true,onClickRow:onListItemClick"></div>
</div>

<div data-options="region:'center',title:'按钮列表'" style="overflow: hidden;">
    <table id="table" class="easyui-datagrid" data-options="fit:true,singleSelect:false,rownumbers:true,toolbar:'#table-tool'">
        <thead>
        <tr>
            <th data-options="field:'id',checkbox:true"></th>
            <!--<th data-options="field:'formName',width:100">业务标识</th>-->
            <th data-options="field:'btnTitle',width:100">标题</th>
            <th data-options="field:'btnName',width:100">标识</th>
            <th data-options="field:'btnIcon',width:40,formatter:Common.iconFormatter">图标</th>
            <th data-options="field:'isShow',width:100">是否显示</th>
            <th data-options="field:'showOrder',width:100">显示顺序</th>
            <th data-options="field:'btnType',width:100">类型</th>
            <th data-options="field:'roles',width:100">角色</th>
            <th data-options="field:'btnAction',width:100">执行动作</th>
            <th data-options="field:'actionScript'">执行脚本</th>
        </tr>
        </thead>
    </table>
</div>
<div id="dialog" class="easyui-dialog uq_dialog" title="操作" data-options="iconCls:'icon-system',resizable:true,closed:true,modal:true,buttons:'#dialog-tool'">
    <form id="form" action="save" method="post">
        <table>
            <tr>
                <td>
                    <label for="formName">业务标识:</label>
                    <input id="id" name="id" value="0" type="hidden"/>
                    <input id="tableName" name="tableName" value="" type="hidden"/>
                </td>
                <td><input id="formName" name="formName" class="easyui-textbox" data-options="required:true,editable:false,width:200"/></td>
                <td><label for="btnName">按钮标识:</label></td>
                <td><input id="btnName" name="btnName" class="easyui-textbox" data-options="required:true,width:200"/></td>
            </tr>
            <tr>
                <td><label for="btnTitle">显示文字:</label></td>
                <td><input id="btnTitle" name="btnTitle" class="easyui-textbox" data-options="required:true,width:200"/></td>
                <td><label for="btnIcon">按钮图标:</label></td>
                <td>
                    <input id="btnIcon" name="btnIcon" type="hidden" value="icon-default"/>
                    <a href="javascript:void(0)" class="easyui-tooltip" style="text-decoration: none; font-size: 10px" data-options="iconCls:'icon-add',
                    hideEvent: 'none',
                    content: function(){
                        $('#iconDiv').show();
                        return $('#iconDiv');
                    },
                    onShow: function(){
                        var t = $(this);
                        t.tooltip('tip').focus().unbind().bind('blur',function(){
                            t.tooltip('hide');
                        });
                    }
                "><span id="icon-uq-show" class="icon-add" style="width: 16px;height: 16px;display:block"/></a>
                </td>
            </tr>
            <tr>
                <td><label for="btnType">按钮类型:</label></td>
                <td>
                    <select id="btnType" name="btnType" class="easyui-combobox" data-options="panelHeight:'auto',required:true,value:0,width:200">
                        <option value="0">系统</option>
                        <option value="1">自定义</option>
                    </select>
                </td>
                <td><label for="roles">角色控制:</label></td>
                <td>
                    <input id="roles" name="roles" class="easyui-combotree" data-options="url:'../role/tree',method:'get',multiple:true,panelHeight:'auto',valueField:'id',textField:'roleDisplay',width:200"/>
                </td>
            </tr>
            <tr>
                <td><label for="isShow">是否显示:</label></td>
                <td>
                    <select id="isShow" name="isShow" class="easyui-combobox" data-options="panelHeight:'auto',required:true,value:0,width:200">
                        <option value="0">显示</option>
                        <option value="1">隐藏</option>
                    </select>
                </td>

                <td><label for="showOrder">显示顺序:</label></td>
                <td><input id="showOrder" name="showOrder" class="easyui-numberspinner" data-options="min:0,value:0,required:true,width:200"/></td>
            </tr>
            <tr>
                <td><label for="btnAction">执行动作:</label></td>
                <td><input id="btnAction" name="btnAction" class="easyui-textbox" data-options="width:200"/></td>
            </tr>
            <tr>
                <td><label for="actionScript">动作脚本:</label></td>
                <td colspan="3"><input id="actionScript" name="actionScript" class="easyui-textbox" data-options="multiline:true,height:50" style="width: 100%"/></td>
            </tr>
        </table>
    </form>
</div>
<div id="dialog-tool">
    <a id="dialog-btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="onSave()">操作</a>
    <a id="dialog-btn-close" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-close'" onclick="javascript:$('#dialog').dialog('close')">关闭</a>
</div>

<div th:replace="base/icon::icon"/>
<script type="text/javascript" th:src="@{/utils/Form.js}"></script>
<script type="text/javascript">

    var formVO;

    // datalist点击事件处理
    function onListItemClick(index, node) {
        formVO = node;
        $("#tableName").val(node.tableName);
        $("#formName").textbox("setValue", node.formName);
        loadFormButton(node.formName);
    }

    // 加载业务表单按钮
    function loadFormButton(formName) {
        if (formName == null || formName == "") {
            return;
        }
        $("#table").datagrid({
            "url": "list?formName=" + formName,
            "method": "get"
        });
    }

    // 刷新datalist
    function onRefreshDataList() {
        $("#list").datalist("reload");
        // 取消所用选中，并清空表格
        $("#table").datagrid("unselectAll");
        $("#table").datagrid("loadData", []);
    }

    // 新增
    function onAdd() {
        // 判断
        if (formVO == null) {
            AlertUtil.error("请选择业务表单后，再操作！")
            return;
        }
        // 清空form表单数据
        $("#form").form("clear");
        // 设置默认值
        $("#formName").textbox("setValue", formVO.formName);
        $("#tableName").val(formVO.tableName);
        $("#btnIcon").val("icon-default");
        $("#icon-uq-show").attr("class", "icon-default");
        $("#id").val(0);

        $('#dialog').dialog("open");
    }

    // 修改
    function onEdit() {
        var rows = $("#table").datagrid("getSelections");
        if (rows == undefined || rows == null || rows == "") {
            AlertUtil.error("请选择后，再操作！");
            return;
        }
        if (rows.length != 1) {
            AlertUtil.error("只能选择一条数据，再操作！");
            return;
        }
        var row = rows[0];
        $("#form").form("load", row);
        // 设置图标
        $("#icon-uq-show").attr("class", row.btnIcon || "icon-default");
        $('#dialog').dialog("open");
    }

    // 刷新
    function onRefresh() {
        if (formVO == undefined || formVO == null) {
            return;
        }
        $("#table").datagrid("unselectAll");
        $("#table").datagrid("reload");
    }

    // 删除
    function onRemove() {
        var rows = $("#table").datagrid("getSelections");
        if (rows == undefined || rows == null || rows == "") {
            AlertUtil.error("请选择后，再操作！");
            return;
        }
        $.messager.confirm("提示", "确定要删除选择项目吗?", function (data) {
            if (data) {
                onRemoveHandler(Common.getIds(rows, "id"));
            }
        });
    }

    function onRemoveHandler(ids) {
        if (ids == "") {
            return;
        }
        AjaxUtil.post("del/" + ids, "", function (data) {
            if (data) {
                AlertUtil.info(data.msg)
                if (data.code == 1) {
                    $("#table").datagrid("unselectAll");
                    $("#table").datagrid("reload");
                }
            } else {
                AlertUtil.error("处理错误，请稍后再试！")
            }
        })
    }

    // 生成默认
    function onDefault() {
        if (formVO == undefined || formVO == null) {
            AlertUtil.error("请选择业务表单后，再操作!")
            return;
        }
        var rows = $("#table").datagrid("getRows");
        var buttons = Common.genFormButtons(formVO.formName, formVO.tableName, rows);
        if (buttons == undefined || buttons == null || buttons.length == 0) {
            return;
        }
        var str = JSON.stringify(buttons)
        AjaxUtil.post("bg", {"p": str}, function (data) {
            if (data) {
                AlertUtil.info(data.msg)
                if (data.code == 1) {
                    $("#table").datagrid("unselectAll");
                    $("#table").datagrid("reload");
                }
            } else {
                AlertUtil.error("处理错误，请稍后再试！")
            }
        })
    }

    // 保存
    function onSave() {
        $("#form").ajaxForm({
            "url": "save",
            "method": "post",
            "dataType": "json",
            "beforeSubmit": function () {
                // 表单有效性验证
                return $("#form").form("validate");
            },
            "success": function (data) {
                if (data) {
                    AlertUtil.info(data.msg)
                    if (data.code == 1) {
                        $("#table").datagrid("unselectAll");
                        $("#table").datagrid("reload");
                        $("#dialog").dialog("close");
                    }
                } else {
                    AlertUtil.error("处理错误，请稍后再试！")
                }
            }
        }).submit();
    }
</script>
</body>
</html>